<template>
    <div>
        <el-select v-model="pageConfig.type" class="m-2" placeholder="Select" size="large" style="margin-bottom : 2rem">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div v-if="list.length === 0 && loading">
            <el-skeleton :rows="8" animated />
        </div>
        <el-table v-else :data="list" style="width: 100%;margin-bottom: 3rem;" v-loading="loading">
            <!-- <el-table-column prop="code" label="企业机构代码" /> -->
            <el-table-column prop="company" label="注册的公司名称" />
            <el-table-column prop="faren" label="法人" />
            <el-table-column prop="phone" label="联系方式" />
            <!-- <el-table-column prop="certificate" label="营业执照" />
            <el-table-column prop="tax" label="税务登记证" /> -->
            <el-table-column label="审核状态">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ state[scope.row.pass] }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleClick(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="center">
            <el-pagination background layout="prev, pager, next" v-model:current-page="pageConfig.page"
                :total="pageConfig.count" :page-size="pageConfig.size" :current-change="handlePageChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useList } from '../../hooks/useList';
const router = useRouter();
const { list, pageConfig, handlePageChange, loading } = useList();
const options = [{
    label: "未通过",
    value: 0
}, {
    label: "通过",
    value: 1
}, {
    label: "未审核",
    value: 2
}]
const state = ["不通过", "通过", "待审核"]

const handleClick = function (row) {
    const { id } = row;
    router.push({
        name: "UserAuditDetail",
        params: {
            id
        }
    })
}

</script>

<style lang="less" scoped>
/deep/ .el-input__wrapper {
    border-radius: 5px;
}

.operations {
    display: flex;
    justify-content: space-around;
}

.center {
    display: flex;
    justify-content: center;
}

/deep/ .el-button {
    width: auto;
}
</style>